<template>
  <div class="vulnerability-validation-container">
    <el-card class="validation-card">
      <template #header>
        <div class="card-header">
          <h2>漏洞验证中心</h2>
          <div class="header-actions">
            <el-button type="primary" @click="newValidationTask">
              <el-icon><Plus /></el-icon>
              新建验证任务
            </el-button>
            <el-button @click="refreshTasks">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <!-- 任务搜索筛选区 -->
      <div class="search-filter-section">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-input
              v-model="searchQuery"
              placeholder="搜索任务名称/目标/漏洞ID"
              prefix-icon="Search"
              clearable
              @input="handleSearch"
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="statusFilter"
              placeholder="任务状态"
              clearable
              @change="handleFilterChange"
            >
              <el-option label="待验证" value="pending" />
              <el-option label="验证中" value="running" />
              <el-option label="已完成" value="completed" />
              <el-option label="失败" value="failed" />
              <el-option label="已暂停" value="paused" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="vulnerabilityTypeFilter"
              placeholder="漏洞类型"
              clearable
              @change="handleFilterChange"
            >
              <el-option label="SQL注入" value="sql_injection" />
              <el-option label="跨站脚本(XSS)" value="xss" />
              <el-option label="命令注入" value="command_injection" />
              <el-option label="跨站请求伪造(CSRF)" value="csrf" />
              <el-option label="信息泄露" value="information_disclosure" />
              <el-option label="未授权访问" value="unauthorized_access" />
              <el-option label="配置错误" value="configuration_error" />
              <el-option label="缓冲区溢出" value="buffer_overflow" />
              <el-option label="密码策略" value="password_policy" />
              <el-option label="过时组件" value="outdated_components" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="validationResultFilter"
              placeholder="验证结果"
              clearable
              @change="handleFilterChange"
            >
              <el-option label="已确认" value="confirmed" />
              <el-option label="误报" value="false_positive" />
              <el-option label="需要手动验证" value="manual_verification" />
              <el-option label="部分确认" value="partially_confirmed" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              @change="handleDateRangeChange"
            />
          </el-col>
          <el-col :span="3">
            <el-button type="primary" icon="Filter" @click="showAdvancedFilters = !showAdvancedFilters">
              高级筛选
            </el-button>
          </el-col>
        </el-row>

        <!-- 高级筛选面板 -->
        <el-collapse v-model="showAdvancedFilters" class="advanced-filters">
          <el-collapse-item title="高级筛选条件" name="advanced">
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="6">
                <el-select
                  v-model="targetTypeFilter"
                  placeholder="目标类型"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="URL" value="url" />
                  <el-option label="IP地址" value="ip" />
                  <el-option label="主机名" value="hostname" />
                  <el-option label="API端点" value="api_endpoint" />
                  <el-option label="文件路径" value="file_path" />
                  <el-option label="代码片段" value="code_snippet" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="validationMethodFilter"
                  placeholder="验证方法"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="自动验证" value="automatic" />
                  <el-option label="半自动化验证" value="semi_automatic" />
                  <el-option label="手动验证" value="manual" />
                  <el-option label="被动检测" value="passive" />
                  <el-option label="漏洞利用验证" value="exploit_based" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="severityFilter"
                  placeholder="漏洞严重程度"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="严重" value="critical" />
                  <el-option label="高危" value="high" />
                  <el-option label="中危" value="medium" />
                  <el-option label="低危" value="low" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="createdByFilter"
                  placeholder="创建者"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="自动扫描" value="auto_scanner" />
                  <el-option label="管理员" value="admin" />
                  <el-option label="安全团队" value="security_team" />
                  <el-option label="开发团队" value="dev_team" />
                </el-select>
              </el-col>
            </el-row>
            <div class="filter-actions" style="margin-top: 10px; text-align: right;">
              <el-button @click="resetFilters">重置筛选</el-button>
              <el-button type="primary" @click="applyAdvancedFilters">应用筛选</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 任务概览统计 -->
      <div class="tasks-overview">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>待验证任务</span>
                  <el-icon><Timer /></el-icon>
                </div>
              </template>
              <div class="overview-content">
                <el-statistic :value="stats.pending" :precision="0" class="stat-value pending">
                  <template #suffix>
                    <el-tooltip content="较昨日">
                      <span class="trend-indicator trend-up">
                        <el-icon><ArrowUp /></el-icon>
                        5
                      </span>
                    </el-tooltip>
                  </template>
                </el-statistic>
                <div class="overview-desc">需要优先验证的任务</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>验证中任务</span>
                  <el-icon><Loading /></el-icon>
                </div>
              </template>
              <div class="overview-content">
                <el-statistic :value="stats.running" :precision="0" class="stat-value running">
                  <template #suffix>
                    <el-tooltip content="较昨日">
                      <span class="trend-indicator trend-down">
                        <el-icon><ArrowDown /></el-icon>
                        2
                      </span>
                    </el-tooltip>
                  </template>
                </el-statistic>
                <div class="overview-desc">正在进行验证的任务</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>已确认漏洞</span>
                  <el-icon><Warning /></el-icon>
                </div>
              </template>
              <div class="overview-content">
                <el-statistic :value="stats.confirmed" :precision="0" class="stat-value confirmed">
                  <template #suffix>
                    <el-tooltip content="较昨日">
                      <span class="trend-indicator trend-up">
                        <el-icon><ArrowUp /></el-icon>
                        8
                      </span>
                    </el-tooltip>
                  </template>
                </el-statistic>
                <div class="overview-desc">已确认存在的真实漏洞</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>误报数量</span>
                  <el-icon><CircleCheck /></el-icon>
                </div>
              </template>
              <div class="overview-content">
                <el-statistic :value="stats.falsePositive" :precision="0" class="stat-value false-positive">
                  <template #suffix>
                    <el-tooltip content="较昨日">
                      <span class="trend-indicator trend-down">
                        <el-icon><ArrowDown /></el-icon>
                        3
                      </span>
                    </el-tooltip>
                  </template>
                </el-statistic>
                <div class="overview-desc">确认为误报的漏洞数量</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>需手动验证</span>
                  <el-icon><User /></el-icon>
                </div>
              </template>
              <div class="overview-content">
                <el-statistic :value="stats.manualVerification" :precision="0" class="stat-value manual">
                  <template #suffix>
                    <el-tooltip content="较昨日">
                      <span class="trend-indicator trend-neutral">
                        <el-icon><Minus /></el-icon>
                        0
                      </span>
                    </el-tooltip>
                  </template>
                </el-statistic>
                <div class="overview-desc">需要人工介入验证的任务</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover">
              <template #header>
                <div class="overview-header">
                  <span>验证成功率</span>
                  <el-icon><TrendCharts /></el-icon>
                </div>
              </template>
              <div class="overview-content">
                <el-statistic :value="stats.successRate" :precision="1" class="stat-value success-rate">
                  <template #suffix>
                    %
                  </template>
                </el-statistic>
                <div class="overview-desc">自动验证成功的比例</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 任务列表表格 -->
      <div class="tasks-table-section">
        <el-table
          v-loading="loading"
          :data="paginatedTasks"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="任务ID" width="100" sortable />
          <el-table-column prop="name" label="任务名称" min-width="180">
            <template #default="scope">
              <el-tooltip :content="scope.row.description" placement="top" :disabled="!scope.row.description">
                <a href="javascript:void(0)" @click="viewTaskDetails(scope.row)">{{ scope.row.name }}</a>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="target" label="验证目标" min-width="150">
            <template #default="scope">
              <el-tag :type="getTargetTypeTag(scope.row.targetType)">
                {{ scope.row.targetTypeLabel }}
              </el-tag>
              <div class="target-value">{{ scope.row.target }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="vulnerabilityType" label="漏洞类型" width="120" sortable>
            <template #default="scope">
              <el-tag>{{ scope.row.vulnerabilityTypeLabel }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="severity" label="严重程度" width="100" sortable>
            <template #default="scope">
              <el-tag :type="getSeverityTag(scope.row.severity)">{{ scope.row.severityLabel }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="任务状态" width="100" sortable>
            <template #default="scope">
              <el-tag :type="getStatusTag(scope.row.status)">
                {{ scope.row.statusLabel }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="result" label="验证结果" width="120" sortable>
            <template #default="scope">
              <el-tag v-if="scope.row.result" :type="getResultTag(scope.row.result)">
                {{ scope.row.resultLabel }}
              </el-tag>
              <span v-else class="text-muted">-</span>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="150" sortable />
          <el-table-column prop="updatedAt" label="更新时间" width="150" sortable />
          <el-table-column prop="createdBy" label="创建者" width="100" />
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <el-button
                v-if="scope.row.status === 'pending' || scope.row.status === 'paused'"
                type="primary"
                size="small"
                @click="startValidation(scope.row)"
              >
                开始验证
              </el-button>
              <el-button
                v-else-if="scope.row.status === 'running'"
                type="warning"
                size="small"
                @click="pauseValidation(scope.row)"
              >
                暂停
              </el-button>
              <el-button
                v-if="scope.row.status === 'completed' || scope.row.status === 'failed'"
                type="info"
                size="small"
                @click="viewTaskDetails(scope.row)"
              >
                查看详情
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="deleteTask(scope.row)"
              >
                删除
              </el-button>
              <el-dropdown size="small">
                <el-button size="small">
                  更多 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="cloneTask(scope.row)">克隆任务</el-dropdown-item>
                    <el-dropdown-item @click="editTask(scope.row)">编辑任务</el-dropdown-item>
                    <el-dropdown-item @click="exportTaskReport(scope.row)">导出报告</el-dropdown-item>
                    <el-dropdown-item @click="shareTask(scope.row)">分享</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <div class="pagination-container">
          <div class="pagination-info">
            共 {{ filteredTasks.length }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第 {{ Math.min(currentPage * pageSize, filteredTasks.length) }} 条
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredTasks.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- 批量操作栏 -->
      <div class="batch-actions" v-if="selectedTasks.length > 0">
        <span>已选择 {{ selectedTasks.length }} 个任务</span>
        <el-button type="primary" size="small" @click="batchStartValidation">批量开始验证</el-button>
        <el-button type="warning" size="small" @click="batchPauseValidation">批量暂停</el-button>
        <el-button type="info" size="small" @click="batchExport">批量导出</el-button>
        <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
        <el-button size="small" @click="clearSelection">取消选择</el-button>
      </div>
    </el-card>

    <!-- 新建/编辑验证任务对话框 -->
    <el-dialog
      v-model="showTaskDialog"
      :title="editingTask ? '编辑验证任务' : '新建验证任务'"
      width="600px"
    >
      <el-form
        :model="taskForm"
        :rules="taskFormRules"
        ref="taskFormRef"
        label-width="100px"
      >
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="taskForm.name" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
          <el-input
            v-model="taskForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入任务描述（可选）"
          />
        </el-form-item>
        <el-form-item label="验证目标" prop="target">
          <el-input
            v-model="taskForm.target"
            placeholder="请输入验证目标（URL、IP、主机名等）"
          />
        </el-form-item>
        <el-form-item label="目标类型" prop="targetType">
          <el-select v-model="taskForm.targetType" placeholder="请选择目标类型">
            <el-option label="URL" value="url" />
            <el-option label="IP地址" value="ip" />
            <el-option label="主机名" value="hostname" />
            <el-option label="API端点" value="api_endpoint" />
            <el-option label="文件路径" value="file_path" />
            <el-option label="代码片段" value="code_snippet" />
          </el-select>
        </el-form-item>
        <el-form-item label="漏洞类型" prop="vulnerabilityType">
          <el-select v-model="taskForm.vulnerabilityType" placeholder="请选择漏洞类型">
            <el-option label="SQL注入" value="sql_injection" />
            <el-option label="跨站脚本(XSS)" value="xss" />
            <el-option label="命令注入" value="command_injection" />
            <el-option label="跨站请求伪造(CSRF)" value="csrf" />
            <el-option label="信息泄露" value="information_disclosure" />
            <el-option label="未授权访问" value="unauthorized_access" />
            <el-option label="配置错误" value="configuration_error" />
            <el-option label="缓冲区溢出" value="buffer_overflow" />
            <el-option label="密码策略" value="password_policy" />
            <el-option label="过时组件" value="outdated_components" />
          </el-select>
        </el-form-item>
        <el-form-item label="严重程度" prop="severity">
          <el-select v-model="taskForm.severity" placeholder="请选择严重程度">
            <el-option label="严重" value="critical" />
            <el-option label="高危" value="high" />
            <el-option label="中危" value="medium" />
            <el-option label="低危" value="low" />
          </el-select>
        </el-form-item>
        <el-form-item label="验证方法" prop="validationMethod">
          <el-select v-model="taskForm.validationMethod" placeholder="请选择验证方法">
            <el-option label="自动验证" value="automatic" />
            <el-option label="半自动化验证" value="semi_automatic" />
            <el-option label="手动验证" value="manual" />
            <el-option label="被动检测" value="passive" />
            <el-option label="漏洞利用验证" value="exploit_based" />
          </el-select>
        </el-form-item>
        <el-form-item label="验证参数" prop="validationParams">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本参数">
              <el-form-item label="请求方法">
                <el-radio-group v-model="taskForm.validationParams.method">
                  <el-radio-button label="GET" />
                  <el-radio-button label="POST" />
                  <el-radio-button label="PUT" />
                  <el-radio-button label="DELETE" />
                  <el-radio-button label="PATCH" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="请求头">
                <el-input
                  v-model="taskForm.validationParams.headers"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入请求头（JSON格式）"
                />
              </el-form-item>
              <el-form-item label="请求体">
                <el-input
                  v-model="taskForm.validationParams.body"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入请求体（根据Content-Type格式）"
                />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="高级参数">
              <el-form-item label="超时时间（秒）">
                <el-input-number v-model="taskForm.validationParams.timeout" :min="5" :max="300" />
              </el-form-item>
              <el-form-item label="重试次数">
                <el-input-number v-model="taskForm.validationParams.retryCount" :min="0" :max="10" />
              </el-form-item>
              <el-form-item label="并发数">
                <el-input-number v-model="taskForm.validationParams.concurrentRequests" :min="1" :max="100" />
              </el-form-item>
              <el-form-item label="代理设置">
                <el-input v-model="taskForm.validationParams.proxy" placeholder="http://proxy:port" />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="自定义验证条件">
              <el-form-item label="验证条件">
                <el-select v-model="taskForm.validationParams.validationConditionType" placeholder="选择验证条件类型">
                  <el-option label="响应包含文本" value="response_contains" />
                  <el-option label="响应状态码" value="response_status_code" />
                  <el-option label="响应时间" value="response_time" />
                  <el-option label="响应大小" value="response_size" />
                  <el-option label="正则表达式匹配" value="regex_match" />
                </el-select>
              </el-form-item>
              <el-form-item label="条件值">
                <el-input v-model="taskForm.validationParams.validationConditionValue" placeholder="请输入条件值" />
              </el-form-item>
              <el-form-item label="条件操作符">
                <el-select v-model="taskForm.validationParams.validationConditionOperator" placeholder="选择操作符">
                  <el-option label="等于" value="equals" />
                  <el-option label="不等于" value="not_equals" />
                  <el-option label="大于" value="greater_than" />
                  <el-option label="小于" value="less_than" />
                  <el-option label="包含" value="contains" />
                  <el-option label="不包含" value="not_contains" />
                  <el-option label="匹配" value="matches" />
                </el-select>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showTaskDialog = false">取消</el-button>
          <el-button type="primary" @click="saveTask">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 任务详情对话框 -->
    <el-dialog
      v-model="showTaskDetailsDialog"
      title="验证任务详情"
      width="800px"
    >
      <div v-if="selectedTaskDetails" class="task-details-container">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="任务ID">{{ selectedTaskDetails.id }}</el-descriptions-item>
          <el-descriptions-item label="任务名称">{{ selectedTaskDetails.name }}</el-descriptions-item>
          <el-descriptions-item label="目标" :span="2">
            <el-tag :type="getTargetTypeTag(selectedTaskDetails.targetType)">{{ selectedTaskDetails.targetTypeLabel }}</el-tag>
            <div class="target-value">{{ selectedTaskDetails.target }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="漏洞类型">{{ selectedTaskDetails.vulnerabilityTypeLabel }}</el-descriptions-item>
          <el-descriptions-item label="严重程度">
            <el-tag :type="getSeverityTag(selectedTaskDetails.severity)">{{ selectedTaskDetails.severityLabel }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="验证方法">{{ selectedTaskDetails.validationMethodLabel }}</el-descriptions-item>
          <el-descriptions-item label="任务状态">
            <el-tag :type="getStatusTag(selectedTaskDetails.status)">{{ selectedTaskDetails.statusLabel }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="验证结果" :span="2">
            <el-tag v-if="selectedTaskDetails.result" :type="getResultTag(selectedTaskDetails.result)">
              {{ selectedTaskDetails.resultLabel }}
            </el-tag>
            <span v-else class="text-muted">-</span>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ selectedTaskDetails.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ selectedTaskDetails.updatedAt }}</el-descriptions-item>
          <el-descriptions-item label="创建者">{{ selectedTaskDetails.createdBy }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ selectedTaskDetails.completedAt || '-' }}</el-descriptions-item>
        </el-descriptions>

        <!-- 验证结果详情 -->
        <div class="validation-results-section" v-if="selectedTaskDetails.status === 'completed'">
          <h3>验证结果详情</h3>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>验证过程摘要</span>
              </div>
            </template>
            <div class="verification-summary">
              <p>{{ selectedTaskDetails.verificationSummary }}</p>
            </div>
          </el-card>

          <!-- 验证步骤 -->
          <el-card class="mt-20">
            <template #header>
              <div class="card-header">
                <span>验证步骤</span>
              </div>
            </template>
            <div class="verification-steps">
              <el-timeline>
                <el-timeline-item
                  v-for="(step, index) in selectedTaskDetails.verificationSteps"
                  :key="index"
                  :timestamp="step.timestamp"
                  :type="step.type"
                >
                  <h4>{{ step.title }}</h4>
                  <p>{{ step.description }}</p>
                  <div v-if="step.details" class="step-details">
                    <pre>{{ JSON.stringify(step.details, null, 2) }}</pre>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>

          <!-- 请求/响应详情 -->
          <el-card class="mt-20">
            <template #header>
              <div class="card-header">
                <span>请求/响应详情</span>
              </div>
            </template>
            <el-tabs>
              <el-tab-pane label="请求">
                <div class="request-details">
                  <div class="request-line">{{ selectedTaskDetails.requestDetails.method }} {{ selectedTaskDetails.requestDetails.url }}</div>
                  <div class="request-headers">
                    <h4>Headers:</h4>
                    <pre>{{ JSON.stringify(selectedTaskDetails.requestDetails.headers, null, 2) }}</pre>
                  </div>
                  <div class="request-body" v-if="selectedTaskDetails.requestDetails.body">
                    <h4>Body:</h4>
                    <pre>{{ selectedTaskDetails.requestDetails.body }}</pre>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="响应">
                <div class="response-details">
                  <div class="response-status">状态码: {{ selectedTaskDetails.responseDetails.statusCode }}</div>
                  <div class="response-time">响应时间: {{ selectedTaskDetails.responseDetails.responseTime }}ms</div>
                  <div class="response-headers">
                    <h4>Headers:</h4>
                    <pre>{{ JSON.stringify(selectedTaskDetails.responseDetails.headers, null, 2) }}</pre>
                  </div>
                  <div class="response-body">
                    <h4>Body:</h4>
                    <pre>{{ selectedTaskDetails.responseDetails.body }}</pre>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-card>

          <!-- 漏洞验证证据 -->
          <el-card class="mt-20">
            <template #header>
              <div class="card-header">
                <span>漏洞验证证据</span>
              </div>
            </template>
            <div class="evidence-container">
              <div class="evidence-item" v-for="(evidence, index) in selectedTaskDetails.evidence" :key="index">
                <h4>{{ evidence.title }}</h4>
                <p>{{ evidence.description }}</p>
                <div v-if="evidence.type === 'screenshot'" class="screenshot-evidence">
                  <el-image
                    :src="evidence.data"
                    :preview-src-list="[evidence.data]"
                    fit="cover"
                    style="width: 100%; height: 300px;"
                  />
                </div>
                <div v-else-if="evidence.type === 'code'" class="code-evidence">
                  <pre><code>{{ evidence.data }}</code></pre>
                </div>
                <div v-else-if="evidence.type === 'text'" class="text-evidence">
                  <pre>{{ evidence.data }}</pre>
                </div>
                <div v-else-if="evidence.type === 'network'" class="network-evidence">
                  <pre>{{ JSON.stringify(evidence.data, null, 2) }}</pre>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 修复建议 -->
          <el-card class="mt-20">
            <template #header>
              <div class="card-header">
                <span>修复建议</span>
              </div>
            </template>
            <div class="remediation-advice">
              <p>{{ selectedTaskDetails.remediationAdvice.generalAdvice }}</p>
              <h4>具体修复步骤:</h4>
              <ol>
                <li v-for="(step, index) in selectedTaskDetails.remediationAdvice.steps" :key="index">
                  {{ step }}
                </li>
              </ol>
              <h4>参考资料:</h4>
              <ul>
                <li v-for="(ref, index) in selectedTaskDetails.remediationAdvice.references" :key="index">
                  <a :href="ref.url" target="_blank">{{ ref.title }}</a>
                </li>
              </ul>
            </div>
          </el-card>
        </div>

        <!-- 任务执行状态 -->
        <div class="task-execution-section" v-if="selectedTaskDetails.status === 'running'">
          <h3>执行状态</h3>
          <el-card>
            <div class="execution-status">
              <el-progress :percentage="selectedTaskDetails.progress" :status="getProgressStatus(selectedTaskDetails.progress)" />
              <div class="progress-info">
                <span>当前步骤: {{ selectedTaskDetails.currentStep }}</span>
                <span>预计剩余时间: {{ selectedTaskDetails.estimatedRemainingTime }}秒</span>
              </div>
              <div class="execution-logs">
                <h4>执行日志:</h4>
                <div class="logs-container">
                  <div v-for="(log, index) in selectedTaskDetails.executionLogs" :key="index" class="log-item">
                    <span class="log-time">{{ log.timestamp }}</span>
                    <span class="log-message">{{ log.message }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showTaskDetailsDialog = false">关闭</el-button>
          <el-button type="primary" @click="exportTaskDetails">导出详情</el-button>
          <el-button v-if="selectedTaskDetails && selectedTaskDetails.status === 'completed' && selectedTaskDetails.result === 'confirmed'" type="success" @click="markAsFixed">标记为已修复</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 批量操作对话框 -->
    <el-dialog
      v-model="showBulkActionDialog"
      :title="bulkActionTitle"
      width="500px"
    >
      <div v-if="bulkActionType === 'export'">
        <el-form :model="bulkActionForm" label-width="100px">
          <el-form-item label="导出格式">
            <el-radio-group v-model="bulkActionForm.exportFormat">
              <el-radio label="json">JSON</el-radio>
              <el-radio label="csv">CSV</el-radio>
              <el-radio label="pdf">PDF</el-radio>
              <el-radio label="html">HTML</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="包含字段">
            <el-checkbox-group v-model="bulkActionForm.exportFields">
              <el-checkbox label="id">任务ID</el-checkbox>
              <el-checkbox label="name">任务名称</el-checkbox>
              <el-checkbox label="target">验证目标</el-checkbox>
              <el-checkbox label="vulnerabilityType">漏洞类型</el-checkbox>
              <el-checkbox label="severity">严重程度</el-checkbox>
              <el-checkbox label="status">任务状态</el-checkbox>
              <el-checkbox label="result">验证结果</el-checkbox>
              <el-checkbox label="createdAt">创建时间</el-checkbox>
              <el-checkbox label="updatedAt">更新时间</el-checkbox>
              <el-checkbox label="verificationSummary">验证摘要</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="bulkActionType === 'delete'">
        <div class="confirm-message">
          <el-alert
            title="确认删除"
            description="您确定要删除选中的 {{ selectedTasks.length }} 个任务吗？此操作不可撤销。"
            type="warning"
            show-icon
          />
        </div>
      </div>
      <div v-else-if="bulkActionType === 'start'">
        <div class="confirm-message">
          <el-alert
            title="确认开始"
            description="您确定要开始选中的 {{ selectedTasks.length }} 个任务吗？"
            type="info"
            show-icon
          />
        </div>
      </div>
      <div v-else-if="bulkActionType === 'pause'">
        <div class="confirm-message">
          <el-alert
            title="确认暂停"
            description="您确定要暂停选中的 {{ selectedTasks.length }} 个任务吗？"
            type="info"
            show-icon
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showBulkActionDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmBulkAction">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分享对话框 -->
    <el-dialog
      v-model="showShareDialog"
      title="分享验证任务"
      width="400px"
    >
      <div v-if="sharingTask" class="share-container">
        <el-form :model="shareForm" label-width="80px">
          <el-form-item label="有效期">
            <el-select v-model="shareForm.expireTime">
              <el-option label="1小时" value="1h" />
              <el-option label="24小时" value="24h" />
              <el-option label="7天" value="7d" />
              <el-option label="30天" value="30d" />
              <el-option label="永久有效" value="never" />
            </el-select>
          </el-form-item>
          <el-form-item label="访问权限">
            <el-radio-group v-model="shareForm.accessLevel">
              <el-radio label="只读">只读</el-radio>
              <el-radio label="可评论">可评论</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="访问密码" prop="password">
            <el-input v-model="shareForm.password" type="password" placeholder="可选，设置访问密码" />
          </el-form-item>
        </el-form>
        <div v-if="shareLink" class="share-link-container">
          <h4>分享链接</h4>
          <el-input v-model="shareLink" readonly />
          <el-button type="primary" @click="copyShareLink">复制链接</el-button>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showShareDialog = false">关闭</el-button>
          <el-button type="primary" @click="generateShareLink">生成链接</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 全局加载遮罩 -->
    <div v-if="loading" class="loading-mask">
      <el-loading :text="loadingText"></el-loading>
    </div>
  </div>
</template>

<template>
  <div class="vulnerability-validation-container">
    <el-card class="validation-card">
      <template #header>
        <div class="card-header">
          <h2>漏洞验证中心</h2>
          <div class="header-actions">
            <el-button type="primary" @click="newValidationTask">
              <el-icon><Plus /></el-icon>
              新建验证任务
            </el-button>
            <el-button @click="refreshTasks">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>

      <!-- 任务搜索筛选区 -->
      <div class="search-filter-section">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-input
              v-model="searchQuery"
              placeholder="搜索任务名称/目标/漏洞ID"
              prefix-icon="Search"
              clearable
              @input="handleSearch"
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="statusFilter"
              placeholder="任务状态"
              clearable
              @change="handleFilterChange"
            >
              <el-option label="待验证" value="pending" />
              <el-option label="验证中" value="running" />
              <el-option label="已完成" value="completed" />
              <el-option label="失败" value="failed" />
              <el-option label="已暂停" value="paused" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="vulnerabilityTypeFilter"
              placeholder="漏洞类型"
              clearable
              @change="handleFilterChange"
            >
              <el-option label="SQL注入" value="sql_injection" />
              <el-option label="跨站脚本(XSS)" value="xss" />
              <el-option label="命令注入" value="command_injection" />
              <el-option label="跨站请求伪造(CSRF)" value="csrf" />
              <el-option label="信息泄露" value="information_disclosure" />
              <el-option label="未授权访问" value="unauthorized_access" />
              <el-option label="配置错误" value="configuration_error" />
              <el-option label="缓冲区溢出" value="buffer_overflow" />
              <el-option label="密码策略" value="password_policy" />
              <el-option label="过时组件" value="outdated_components" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="validationResultFilter"
              placeholder="验证结果"
              clearable
              @change="handleFilterChange"
            >
              <el-option label="已确认" value="confirmed" />
              <el-option label="误报" value="false_positive" />
              <el-option label="需要手动验证" value="manual_verification" />
              <el-option label="部分确认" value="partially_confirmed" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              @change="handleDateRangeChange"
            />
          </el-col>
          <el-col :span="3">
            <el-button type="primary" icon="Filter" @click="showAdvancedFilters = !showAdvancedFilters">
              高级筛选
            </el-button>
          </el-col>
        </el-row>

        <!-- 高级筛选面板 -->
        <el-collapse v-model="showAdvancedFilters" class="advanced-filters">
          <el-collapse-item title="高级筛选条件" name="advanced">
            <el-row :gutter="20" style="margin-top: 10px;">
              <el-col :span="6">
                <el-select
                  v-model="targetTypeFilter"
                  placeholder="目标类型"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="URL" value="url" />
                  <el-option label="IP地址" value="ip" />
                  <el-option label="主机名" value="hostname" />
                  <el-option label="API端点" value="api_endpoint" />
                  <el-option label="文件路径" value="file_path" />
                  <el-option label="代码片段" value="code_snippet" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="validationMethodFilter"
                  placeholder="验证方法"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="自动验证" value="automatic" />
                  <el-option label="半自动化验证" value="semi_automatic" />
                  <el-option label="手动验证" value="manual" />
                  <el-option label="被动检测" value="passive" />
                  <el-option label="漏洞利用验证" value="exploit_based" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="severityFilter"
                  placeholder="漏洞严重程度"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="严重" value="critical" />
                  <el-option label="高危" value="high" />
                  <el-option label="中危" value="medium" />
                  <el-option label="低危" value="low" />
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select
                  v-model="createdByFilter"
                  placeholder="创建者"
                  clearable
                  @change="handleFilterChange"
                >
                  <el-option label="自动扫描" value="auto_scanner" />
                  <el-option label="管理员" value="admin" />
                  <el-option label="安全团队" value="security_team" />
                  <el-option label="开发团队" value="dev_team" />
                </el-select>
              </el-col>
            </el-row>
            <div class="filter-actions" style="margin-top: 10px; text-align: right;">
              <el-button @click="resetFilters">重置筛选</el-button>
              <el-button type="primary" @click="applyAdvancedFilters">应用筛选</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import { Plus, Refresh, Search, Filter, Timer, Loading, Warning, CircleCheck, User, TrendCharts, ArrowUp, ArrowDown, Minus, ArrowDown as DropdownArrow } from '@element-plus/icons-vue'
import apiService from '../services/apiService.js'
import { formatDate, formatDateTime } from '../utils/dateUtils.js'

// 响应式数据
const loading = ref(false)
const loadingText = ref('加载中...')
const searchQuery = ref('')
const statusFilter = ref('')
const vulnerabilityTypeFilter = ref('')
const validationResultFilter = ref('')
const dateRange = ref([])
const targetTypeFilter = ref('')
const validationMethodFilter = ref('')
const severityFilter = ref('')
const createdByFilter = ref('')
const showAdvancedFilters = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const selectedTasks = ref([])
const showTaskDialog = ref(false)
const editingTask = ref(null)
const showTaskDetailsDialog = ref(false)
const selectedTaskDetails = ref(null)
const showBulkActionDialog = ref(false)
const bulkActionType = ref('')
const bulkActionTitle = ref('')
const showShareDialog = ref(false)
const sharingTask = ref(null)
const shareLink = ref('')
const activeTab = ref('0')

// 表单相关数据
const taskForm = ref({
  name: '',
  description: '',
  target: '',
  targetType: 'url',
  vulnerabilityType: 'sql_injection',
  severity: 'high',
  validationMethod: 'automatic',
  validationParams: {
    method: 'GET',
    headers: '{}',
    body: '',
    timeout: 30,
    retryCount: 3,
    concurrentRequests: 10,
    proxy: '',
    validationConditionType: 'response_contains',
    validationConditionValue: '',
    validationConditionOperator: 'contains'
  }
})

const taskFormRules = {
  name: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
    { min: 2, max: 100, message: '任务名称长度在 2 到 100 个字符之间', trigger: 'blur' }
  ],
  target: [
    { required: true, message: '请输入验证目标', trigger: 'blur' }
  ],
  targetType: [
    { required: true, message: '请选择目标类型', trigger: 'change' }
  ],
  vulnerabilityType: [
    { required: true, message: '请选择漏洞类型', trigger: 'change' }
  ],
  severity: [
    { required: true, message: '请选择严重程度', trigger: 'change' }
  ],
  validationMethod: [
    { required: true, message: '请选择验证方法', trigger: 'change' }
  ]
}

const taskFormRef = ref(null)

const bulkActionForm = ref({
  exportFormat: 'json',
  exportFields: ['id', 'name', 'target', 'vulnerabilityType', 'severity', 'status', 'result', 'createdAt']
})

const shareForm = ref({
  expireTime: '24h',
  accessLevel: '只读',
  password: ''
})

// 模拟数据 - 实际项目中应该从API获取
const tasks = ref([])

// 统计数据
const stats = reactive({
  pending: 28,
  running: 12,
  confirmed: 145,
  falsePositive: 78,
  manualVerification: 5,
  successRate: 87.5
})

// 计算属性
const filteredTasks = computed(() => {
  let filtered = [...tasks.value]
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(task => 
      task.id.toLowerCase().includes(query) ||
      task.name.toLowerCase().includes(query) ||
      task.target.toLowerCase().includes(query)
    )
  }
  
  // 状态过滤
  if (statusFilter.value) {
    filtered = filtered.filter(task => task.status === statusFilter.value)
  }
  
  // 漏洞类型过滤
  if (vulnerabilityTypeFilter.value) {
    filtered = filtered.filter(task => task.vulnerabilityType === vulnerabilityTypeFilter.value)
  }
  
  // 验证结果过滤
  if (validationResultFilter.value) {
    filtered = filtered.filter(task => task.result === validationResultFilter.value)
  }
  
  // 日期范围过滤
  if (dateRange.value && dateRange.value.length === 2) {
    const startDate = new Date(dateRange.value[0])
    const endDate = new Date(dateRange.value[1])
    endDate.setHours(23, 59, 59, 999)
    
    filtered = filtered.filter(task => {
      const taskDate = new Date(task.createdAt)
      return taskDate >= startDate && taskDate <= endDate
    })
  }
  
  // 高级过滤
  if (targetTypeFilter.value) {
    filtered = filtered.filter(task => task.targetType === targetTypeFilter.value)
  }
  
  if (validationMethodFilter.value) {
    filtered = filtered.filter(task => task.validationMethod === validationMethodFilter.value)
  }
  
  if (severityFilter.value) {
    filtered = filtered.filter(task => task.severity === severityFilter.value)
  }
  
  if (createdByFilter.value) {
    filtered = filtered.filter(task => task.createdBy === createdByFilter.value)
  }
  
  return filtered
})

const paginatedTasks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTasks.value.slice(start, end)
})

// 方法
const loadTasks = async () => {
  loading.value = true
  loadingText.value = '加载验证任务...'
  try {
    // 模拟API调用
    // const response = await apiService.getValidationTasks()
    // tasks.value = response.data
    
    // 生成模拟数据
    generateMockTasks()
  } catch (error) {
    console.error('加载验证任务失败:', error)
    ElMessage.error('加载验证任务失败，请重试')
  } finally {
    loading.value = false
  }
}

const generateMockTasks = () => {
  const vulnerabilityTypes = [
    { value: 'sql_injection', label: 'SQL注入' },
    { value: 'xss', label: '跨站脚本(XSS)' },
    { value: 'command_injection', label: '命令注入' },
    { value: 'csrf', label: '跨站请求伪造(CSRF)' },
    { value: 'information_disclosure', label: '信息泄露' },
    { value: 'unauthorized_access', label: '未授权访问' },
    { value: 'configuration_error', label: '配置错误' },
    { value: 'buffer_overflow', label: '缓冲区溢出' },
    { value: 'password_policy', label: '密码策略' },
    { value: 'outdated_components', label: '过时组件' }
  ]
  
  const statuses = [
    { value: 'pending', label: '待验证' },
    { value: 'running', label: '验证中' },
    { value: 'completed', label: '已完成' },
    { value: 'failed', label: '失败' },
    { value: 'paused', label: '已暂停' }
  ]
  
  const results = [
    { value: 'confirmed', label: '已确认' },
    { value: 'false_positive', label: '误报' },
    { value: 'manual_verification', label: '需要手动验证' },
    { value: 'partially_confirmed', label: '部分确认' }
  ]
  
  const severities = [
    { value: 'critical', label: '严重' },
    { value: 'high', label: '高危' },
    { value: 'medium', label: '中危' },
    { value: 'low', label: '低危' }
  ]
  
  const targetTypes = [
    { value: 'url', label: 'URL' },
    { value: 'ip', label: 'IP地址' },
    { value: 'hostname', label: '主机名' },
    { value: 'api_endpoint', label: 'API端点' },
    { value: 'file_path', label: '文件路径' },
    { value: 'code_snippet', label: '代码片段' }
  ]
  
  const validationMethods = [
    { value: 'automatic', label: '自动验证' },
    { value: 'semi_automatic', label: '半自动化验证' },
    { value: 'manual', label: '手动验证' },
    { value: 'passive', label: '被动检测' },
    { value: 'exploit_based', label: '漏洞利用验证' }
  ]
  
  const createdBy = ['auto_scanner', 'admin', 'security_team', 'dev_team']
  
  const mockTasks = []
  for (let i = 1; i <= 200; i++) {
    const vulnerabilityType = vulnerabilityTypes[Math.floor(Math.random() * vulnerabilityTypes.length)]
    const status = statuses[Math.floor(Math.random() * statuses.length)]
    const severity = severities[Math.floor(Math.random() * severities.length)]
    const targetType = targetTypes[Math.floor(Math.random() * targetTypes.length)]
    const validationMethod = validationMethods[Math.floor(Math.random() * validationMethods.length)]
    
    // 只有已完成的任务才有验证结果
    let result = null
    if (status.value === 'completed') {
      result = results[Math.floor(Math.random() * results.length)]
    }
    
    // 生成随机日期（最近30天内）
    const createdDate = new Date()
    createdDate.setDate(createdDate.getDate() - Math.floor(Math.random() * 30))
    createdDate.setHours(Math.floor(Math.random() * 24), Math.floor(Math.random() * 60), Math.floor(Math.random() * 60))
    
    const updatedDate = new Date(createdDate)
    updatedDate.setDate(updatedDate.getDate() + Math.floor(Math.random() * 5))
    updatedDate.setHours(Math.floor(Math.random() * 24), Math.floor(Math.random() * 60), Math.floor(Math.random() * 60))
    
    let target = ''
    switch (targetType.value) {
      case 'url':
        target = `https://example${Math.floor(Math.random() * 100)}.com/page?id=${i}`
        break
      case 'ip':
        target = `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`
        break
      case 'hostname':
        target = `server${Math.floor(Math.random() * 100)}.internal.example.com`
        break
      case 'api_endpoint':
        target = `https://api.example.com/v1/users/${i}/profile`
        break
      case 'file_path':
        target = `/var/www/html/config.php`
        break
      case 'code_snippet':
        target = `function getUserData($id) { return $db->query("SELECT * FROM users WHERE id = ${i}"); }`
        break
    }
    
    mockTasks.push({
      id: `VT${10000 + i}`,
      name: `${vulnerabilityType.label}漏洞验证任务 #${i}`,
      description: `对${targetType.label}目标进行${vulnerabilityType.label}漏洞验证`,
      target: target,
      targetType: targetType.value,
      targetTypeLabel: targetType.label,
      vulnerabilityType: vulnerabilityType.value,
      vulnerabilityTypeLabel: vulnerabilityType.label,
      severity: severity.value,
      severityLabel: severity.label,
      status: status.value,
      statusLabel: status.label,
      result: result ? result.value : null,
      resultLabel: result ? result.label : null,
      validationMethod: validationMethod.value,
      validationMethodLabel: validationMethod.label,
      createdAt: formatDateTime(createdDate),
      updatedAt: formatDateTime(updatedDate),
      createdBy: createdBy[Math.floor(Math.random() * createdBy.length)],
      // 运行中的任务添加进度信息
      progress: status.value === 'running' ? Math.floor(Math.random() * 90) + 10 : 100,
      currentStep: status.value === 'running' ? `步骤 ${Math.floor(Math.random() * 5) + 1}/5` : '',
      estimatedRemainingTime: status.value === 'running' ? Math.floor(Math.random() * 300) + 60 : 0
    })
  }
  
  tasks.value = mockTasks
}

const getSeverityTag = (severity) => {
  const types = {
    'critical': 'danger',
    'high': 'warning',
    'medium': 'primary',
    'low': 'success'
  }
  return types[severity] || 'info'
}

const getStatusTag = (status) => {
  const types = {
    'pending': 'warning',
    'running': 'primary',
    'completed': 'success',
    'failed': 'danger',
    'paused': 'info'
  }
  return types[status] || 'info'
}

const getResultTag = (result) => {
  const types = {
    'confirmed': 'danger',
    'false_positive': 'success',
    'manual_verification': 'warning',
    'partially_confirmed': 'primary'
  }
  return types[result] || 'info'
}

const getTargetTypeTag = (targetType) => {
  const types = {
    'url': 'primary',
    'ip': 'info',
    'hostname': 'warning',
    'api_endpoint': 'success',
    'file_path': 'danger',
    'code_snippet': 'info'
  }
  return types[targetType] || 'info'
}

const getProgressStatus = (progress) => {
  if (progress < 30) return 'exception'
  if (progress < 70) return 'warning'
  return 'success'
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleFilterChange = () => {
  currentPage.value = 1
}

const handleDateRangeChange = () => {
  currentPage.value = 1
}

const applyAdvancedFilters = () => {
  currentPage.value = 1
  ElMessage.success('高级筛选已应用')
}

const resetFilters = () => {
  targetTypeFilter.value = ''
  validationMethodFilter.value = ''
  severityFilter.value = ''
  createdByFilter.value = ''
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (current) => {
  currentPage.value = current
}

const handleSelectionChange = (selection) => {
  selectedTasks.value = selection
}

const clearSelection = () => {
  selectedTasks.value = []
}

const newValidationTask = () => {
  editingTask.value = null
  resetTaskForm()
  showTaskDialog.value = true
}

const editTask = (task) => {
  editingTask.value = task
  taskForm.value = {
    name: task.name,
    description: task.description || '',
    target: task.target,
    targetType: task.targetType,
    vulnerabilityType: task.vulnerabilityType,
    severity: task.severity,
    validationMethod: task.validationMethod,
    validationParams: {
      method: 'GET',
      headers: '{}',
      body: '',
      timeout: 30,
      retryCount: 3,
      concurrentRequests: 10,
      proxy: '',
      validationConditionType: 'response_contains',
      validationConditionValue: '',
      validationConditionOperator: 'contains'
    }
  }
  showTaskDialog.value = true
}

const resetTaskForm = () => {
  taskForm.value = {
    name: '',
    description: '',
    target: '',
    targetType: 'url',
    vulnerabilityType: 'sql_injection',
    severity: 'high',
    validationMethod: 'automatic',
    validationParams: {
      method: 'GET',
      headers: '{}',
      body: '',
      timeout: 30,
      retryCount: 3,
      concurrentRequests: 10,
      proxy: '',
      validationConditionType: 'response_contains',
      validationConditionValue: '',
      validationConditionOperator: 'contains'
    }
  }
  activeTab.value = '0'
}

const saveTask = async () => {
  if (!taskFormRef.value) return
  
  try {
    await taskFormRef.value.validate()
    
    loading.value = true
    loadingText.value = '保存任务中...'
    
    // 模拟API调用
    // if (editingTask.value) {
    //   await apiService.updateValidationTask(editingTask.value.id, taskForm.value)
    // } else {
    //   await apiService.createValidationTask(taskForm.value)
    // }
    
    setTimeout(() => {
      showTaskDialog.value = false
      ElMessage.success(editingTask.value ? '任务更新成功' : '任务创建成功')
      refreshTasks()
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('保存任务失败:', error)
    ElMessage.error('保存任务失败，请重试')
    loading.value = false
  }
}

const viewTaskDetails = async (task) => {
  loading.value = true
  loadingText.value = '加载任务详情...'
  try {
    // 模拟API调用
    // const response = await apiService.getValidationTaskDetails(task.id)
    // selectedTaskDetails.value = response.data
    
    // 生成模拟详情数据
    selectedTaskDetails.value = generateMockTaskDetails(task)
    
    showTaskDetailsDialog.value = true
  } catch (error) {
    console.error('加载任务详情失败:', error)
    ElMessage.error('加载任务详情失败，请重试')
  } finally {
    loading.value = false
  }
}

const generateMockTaskDetails = (task) => {
  // 基础信息
  const details = { ...task }
  
  // 如果任务已完成，添加详细验证信息
  if (task.status === 'completed') {
    details.verificationSummary = task.result === 'confirmed' 
      ? `成功确认目标${task.target}存在${task.vulnerabilityTypeLabel}漏洞。漏洞可被利用，可能导致未授权数据访问、数据篡改或系统控制。建议立即修复。`
      : `经过详细验证，目标${task.target}上报告的${task.vulnerabilityTypeLabel}漏洞被确认为误报。`
    
    details.completedAt = formatDateTime(new Date())
    
    // 验证步骤
    details.verificationSteps = [
      {
        timestamp: formatDateTime(new Date(Date.now() - 600000)),
        type: 'primary',
        title: '初始化验证环境',
        description: '准备验证所需的工具和环境配置',
        details: {
          tools: ['验证器v2.1', 'HTTP代理'],
          environment: '安全沙箱环境'
        }
      },
      {
        timestamp: formatDateTime(new Date(Date.now() - 540000)),
        type: 'primary',
        title: '目标可达性检查',
        description: '验证目标是否可以正常访问',
        details: {
          responseCode: 200,
          responseTime: 120,
          accessibility: '正常'
        }
      },
      {
        timestamp: formatDateTime(new Date(Date.now() - 480000)),
        type: task.result === 'confirmed' ? 'danger' : 'success',
        title: task.vulnerabilityTypeLabel + '漏洞验证',
        description: task.result === 'confirmed' 
          ? '成功验证漏洞存在，可被实际利用'
          : '未检测到漏洞特征，确认为误报',
        details: task.result === 'confirmed' 
          ? {
              payload: task.vulnerabilityType === 'sql_injection' ? "' OR '1'='1" : "<script>alert('XSS')</script>",
              detectionMethod: '漏洞利用验证',
              confidence: 95
            }
          : {
              testedPayloads: 15,
              detectionMethod: '多重验证',
              confidence: 90
            }
      },
      {
        timestamp: formatDateTime(new Date(Date.now() - 360000)),
        type: 'primary',
        title: '影响范围评估',
        description: '评估漏洞可能影响的范围和程度',
        details: task.result === 'confirmed' 
          ? {
              affectedSystems: ['核心数据库', '用户信息'],
              potentialImpact: '数据泄露、数据篡改',
              exploitationDifficulty: '低'
            }
          : {
              testedSystems: ['全部系统'],
              riskLevel: '低'
            }
      },
      {
        timestamp: formatDateTime(new Date(Date.now() - 120000)),
        type: 'success',
        title: '生成验证报告',
        description: '创建详细的验证报告和修复建议',
        details: {
          reportId: `REP${Math.floor(Math.random() * 10000)}`,
          reportVersion: '1.0',
          generatedBy: '自动验证系统'
        }
      }
    ]
    
    // 请求详情
    details.requestDetails = {
      method: 'GET',
      url: task.target,
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
        'Accept-Language': 'zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2',
        'Connection': 'keep-alive'
      },
      body: ''
    }
    
    // 响应详情
    details.responseDetails = {
      statusCode: task.result === 'confirmed' ? 200 : 403,
      responseTime: 150,
      headers: {
        'Content-Type': 'text/html; charset=utf-8',
        'Server': 'Apache/2.4.41',
        'X-Powered-By': 'PHP/7.4.3',
        'Set-Cookie': 'sessionid=abc123def456; path=/; HttpOnly'
      },
      body: task.result === 'confirmed' 
        ? '<!DOCTYPE html><html><body><div>数据库查询结果: 100条记录</div><table>...</table></body></html>'
        : '<!DOCTYPE html><html><body><div>访问被拒绝</div></body></html>'
    }
    
    // 证据
    if (task.result === 'confirmed') {
      details.evidence = [
        {
          title: 'SQL错误信息泄露',
          description: '服务器返回了详细的SQL错误信息，这是SQL注入漏洞的典型特征',
          type: 'text',
          data: 'SQL Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near "' OR '1'='1'" at line 1'
        },
        {
          title: '成功的查询结果',
          description: '使用注入payload成功获取了数据库中的记录',
          type: 'text',
          data: '查询结果包含100条用户记录，包括管理员账户信息'
        },
        {
          title: '网络请求记录',
          description: '验证过程中的关键网络请求',
          type: 'network',
          data: {
            request: {
              url: task.target + "' OR '1'='1",
              method: 'GET',
              headers: {}
            },
            response: {
              status: 200,
              headers: {},
              body_truncated: true
            }
          }
        }
      ]
      
      // 修复建议
      details.remediationAdvice = {
        generalAdvice: `需要对${task.vulnerabilityTypeLabel}漏洞进行修复，以防止未授权访问和数据泄露。建议采用参数化查询或预处理语句来替代直接字符串拼接。`,
        steps: [
          '使用参数化查询替代字符串拼接',
          '实施输入验证和过滤',
          '限制数据库用户权限',
          '启用Web应用防火墙',
          '定期进行安全测试'
        ],
        references: [
          {
            title: 'OWASP SQL注入防御备忘单',
            url: 'https://cheatsheetseries.owasp.org/cheatsheets/SQL_Injection_Prevention_Cheat_Sheet.html'
          },
          {
            title: 'CWE-89: SQL注入',
            url: 'https://cwe.mitre.org/data/definitions/89.html'
          }
        ]
      }
    } else {
      details.evidence = [
        {
          title: '安全的输入处理',
          description: '系统正确处理了恶意输入，未返回敏感信息',
          type: 'text',
          data: '所有测试的payload都被正确过滤或转义'
        },
        {
          title: '安全的错误处理',
          description: '系统使用了通用错误消息，未泄露技术细节',
          type: 'text',
          data: '错误消息："操作失败，请稍后再试"'
        }
      ]
    }
  } else if (task.status === 'running') {
    // 运行中的任务添加执行日志
    details.executionLogs = [
      { timestamp: formatDateTime(new Date(Date.now() - 300000)), message: '开始验证任务' },
      { timestamp: formatDateTime(new Date(Date.now() - 240000)), message: '目标可达性检查通过' },
      { timestamp: formatDateTime(new Date(Date.now() - 180000)), message: '开始执行漏洞验证测试' },
      { timestamp: formatDateTime(new Date(Date.now() - 120000)), message: '测试payload 1/10 完成' },
      { timestamp: formatDateTime(new Date(Date.now() - 60000)), message: '测试payload 5/10 完成' }
    ]
  }
  
  return details
}

const startValidation = async (task) => {
  try {
    loading.value = true
    loadingText.value = '开始验证中...'
    
    // 模拟API调用
    // await apiService.startValidationTask(task.id)
    
    setTimeout(() => {
      const taskIndex = tasks.value.findIndex(t => t.id === task.id)
      if (taskIndex !== -1) {
        tasks.value[taskIndex].status = 'running'
        tasks.value[taskIndex].statusLabel = '验证中'
        tasks.value[taskIndex].progress = 10
        tasks.value[taskIndex].currentStep = '步骤 1/5'
        tasks.value[taskIndex].estimatedRemainingTime = 300
      }
      
      ElMessage.success('验证任务已开始')
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('开始验证失败:', error)
    ElMessage.error('开始验证失败，请重试')
    loading.value = false
  }
}

const pauseValidation = async (task) => {
  try {
    loading.value = true
    loadingText.value = '暂停验证中...'
    
    // 模拟API调用
    // await apiService.pauseValidationTask(task.id)
    
    setTimeout(() => {
      const taskIndex = tasks.value.findIndex(t => t.id === task.id)
      if (taskIndex !== -1) {
        tasks.value[taskIndex].status = 'paused'
        tasks.value[taskIndex].statusLabel = '已暂停'
      }
      
      ElMessage.success('验证任务已暂停')
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('暂停验证失败:', error)
    ElMessage.error('暂停验证失败，请重试')
    loading.value = false
  }
}

const deleteTask = async (task) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除验证任务"${task.name}"吗？此操作不可撤销。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    loading.value = true
    loadingText.value = '删除任务中...'
    
    // 模拟API调用
    // await apiService.deleteValidationTask(task.id)
    
    setTimeout(() => {
      const taskIndex = tasks.value.findIndex(t => t.id === task.id)
      if (taskIndex !== -1) {
        tasks.value.splice(taskIndex, 1)
      }
      
      ElMessage.success('任务删除成功')
      loading.value = false
    }, 1000)
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除任务失败:', error)
      ElMessage.error('删除任务失败，请重试')
    }
    loading.value = false
  }
}

const cloneTask = async (task) => {
  try {
    loading.value = true
    loadingText.value = '克隆任务中...'
    
    // 模拟API调用
    // const response = await apiService.cloneValidationTask(task.id)
    // const clonedTask = response.data
    
    setTimeout(() => {
      const newId = `VT${Math.floor(Math.random() * 100000)}`
      const clonedTask = {
        ...task,
        id: newId,
        name: `${task.name} (克隆)`,
        status: 'pending',
        statusLabel: '待验证',
        result: null,
        resultLabel: null,
        createdAt: formatDateTime(new Date()),
        updatedAt: formatDateTime(new Date())
      }
      
      tasks.value.unshift(clonedTask)
      
      ElMessage.success('任务克隆成功')
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('克隆任务失败:', error)
    ElMessage.error('克隆任务失败，请重试')
    loading.value = false
  }
}

const exportTaskReport = async (task) => {
  try {
    loading.value = true
    loadingText.value = '导出报告中...'
    
    // 模拟API调用
    // await apiService.exportValidationTaskReport(task.id, 'pdf')
    
    setTimeout(() => {
      ElMessage.success('报告导出成功')
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('导出报告失败:', error)
    ElMessage.error('导出报告失败，请重试')
    loading.value = false
  }
}

const shareTask = (task) => {
  sharingTask.value = task
  shareForm.value = {
    expireTime: '24h',
    accessLevel: '只读',
    password: ''
  }
  shareLink.value = ''
  showShareDialog.value = true
}

const generateShareLink = async () => {
  try {
    loading.value = true
    loadingText.value = '生成分享链接中...'
    
    // 模拟API调用
    // const response = await apiService.generateValidationTaskShareLink(sharingTask.value.id, shareForm.value)
    // shareLink.value = response.data.shareLink
    
    setTimeout(() => {
      shareLink.value = `https://vuln-scanner.example.com/share/${sharingTask.value.id}?token=${Math.random().toString(36).substring(2)}`
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('生成分享链接失败:', error)
    ElMessage.error('生成分享链接失败，请重试')
    loading.value = false
  }
}

const copyShareLink = () => {
  navigator.clipboard.writeText(shareLink.value).then(() => {
    ElMessage.success('链接已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制')
  })
}

const exportTaskDetails = async () => {
  try {
    loading.value = true
    loadingText.value = '导出详情中...'
    
    // 模拟API调用
    // await apiService.exportValidationTaskDetails(selectedTaskDetails.value.id, 'pdf')
    
    setTimeout(() => {
      ElMessage.success('详情导出成功')
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('导出详情失败:', error)
    ElMessage.error('导出详情失败，请重试')
    loading.value = false
  }
}

const markAsFixed = async () => {
  try {
    loading.value = true
    loadingText.value = '标记为已修复中...'
    
    // 模拟API调用
    // await apiService.markValidationTaskAsFixed(selectedTaskDetails.value.id)
    
    setTimeout(() => {
      ElMessage.success('漏洞已标记为已修复')
      loading.value = false
    }, 1000)
  } catch (error) {
    console.error('标记失败:', error)
    ElMessage.error('标记失败，请重试')
    loading.value = false
  }
}

const batchStartValidation = () => {
  bulkActionType.value = 'start'
  bulkActionTitle.value = '批量开始验证'
  showBulkActionDialog.value = true
}

const batchPauseValidation = () => {
  bulkActionType.value = 'pause'
  bulkActionTitle.value = '批量暂停验证'
  showBulkActionDialog.value = true
}

const batchExport = () => {
  bulkActionType.value = 'export'
  bulkActionTitle.value = '批量导出'
  showBulkActionDialog.value = true
}

const batchDelete = () => {
  bulkActionType.value = 'delete'
  bulkActionTitle.value = '批量删除'
  showBulkActionDialog.value = true
}

const confirmBulkAction = async () => {
  try {
    loading.value = true
    
    const taskIds = selectedTasks.value.map(task => task.id)
    
    switch (bulkActionType.value) {
      case 'start':
        loadingText.value = '批量开始验证中...'
        // 模拟API调用
        // await apiService.batchStartValidationTasks(taskIds)
        setTimeout(() => {
          tasks.value.forEach(task => {
            if (taskIds.includes(task.id)) {
              task.status = 'running'
              task.statusLabel = '验证中'
              task.progress = 10
            }
          })
          ElMessage.success(`成功开始${selectedTasks.value.length}个验证任务`)
          loading.value = false
        }, 1000)
        break
      
      case 'pause':
        loadingText.value = '批量暂停验证中...'
        // 模拟API调用
        // await apiService.batchPauseValidationTasks(taskIds)
        setTimeout(() => {
          tasks.value.forEach(task => {
            if (taskIds.includes(task.id)) {
              task.status = 'paused'
              task.statusLabel = '已暂停'
            }
          })
          ElMessage.success(`成功暂停${selectedTasks.value.length}个验证任务`)
          loading.value = false
        }, 1000)
        break
      
      case 'export':
        loadingText.value = '批量导出中...'
        // 模拟API调用
        // await apiService.batchExportValidationTasks(taskIds, bulkActionForm.value)
        setTimeout(() => {
          ElMessage.success(`成功导出${selectedTasks.value.length}个任务报告`)
          loading.value = false
        }, 1000)
        break
      
      case 'delete':
        loadingText.value = '批量删除中...'
        // 模拟API调用
        // await apiService.batchDeleteValidationTasks(taskIds)
        setTimeout(() => {
          tasks.value = tasks.value.filter(task => !taskIds.includes(task.id))
          ElMessage.success(`成功删除${selectedTasks.value.length}个验证任务`)
          selectedTasks.value = []
          loading.value = false
        }, 1000)
        break
    }
    
    showBulkActionDialog.value = false
  } catch (error) {
    console.error('批量操作失败:', error)
    ElMessage.error('批量操作失败，请重试')
    loading.value = false
  }
}

const refreshTasks = () => {
  loadTasks()
}

// 生命周期钩子
onMounted(() => {
  loadTasks()
})
<style scoped>
.vulnerability-validation-container {
  padding: 20px;
}

.validation-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-filter-section {
  margin-bottom: 20px;
}

.advanced-filters {
  margin-top: 10px;
}

.filter-actions {
  text-align: right;
  margin-top: 10px;
}

.tasks-overview {
  margin-bottom: 20px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overview-content {
  text-align: center;
}

.stat-value {
  margin-bottom: 10px;
}

.stat-value.pending .el-statistic__value {
  color: #E6A23C;
}

.stat-value.running .el-statistic__value {
  color: #409EFF;
}

.stat-value.confirmed .el-statistic__value {
  color: #F56C6C;
}

.stat-value.false-positive .el-statistic__value {
  color: #67C23A;
}

.stat-value.manual .el-statistic__value {
  color: #909399;
}

.stat-value.success-rate .el-statistic__value {
  color: #67C23A;
}

.overview-desc {
  font-size: 12px;
  color: #909399;
}

.trend-indicator {
  font-size: 12px;
  margin-left: 5px;
}

.trend-up {
  color: #F56C6C;
}

.trend-down {
  color: #67C23A;
}

.trend-neutral {
  color: #909399;
}

.tasks-table-section {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #F5F7FA;
  border: 1px solid #E4E7ED;
  border-radius: 4px;
  margin-bottom: 20px;
}

.batch-actions span {
  font-weight: 500;
  color: #303133;
}

.target-value {
  margin-top: 5px;
  word-break: break-all;
}

.task-details-container {
  max-height: 600px;
  overflow-y: auto;
}

.validation-results-section,
.task-execution-section {
  margin-top: 20px;
}

.validation-results-section h3,
.task-execution-section h3 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
}

.verification-summary {
  line-height: 1.6;
}

.verification-steps {
  margin-top: 10px;
}

.step-details {
  margin-top: 5px;
  padding: 10px;
  background-color: #F5F7FA;
  border-radius: 4px;
  overflow-x: auto;
}

.step-details pre {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.request-details,
.response-details {
  font-family: 'Courier New', Courier, monospace;
}

.request-line,
.response-status,
.response-time {
  font-weight: 500;
  margin-bottom: 10px;
}

.request-headers,
.request-body,
.response-headers,
.response-body {
  margin-bottom: 15px;
}

.request-headers h4,
.request-body h4,
.response-headers h4,
.response-body h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 500;
}

.request-headers pre,
.request-body pre,
.response-headers pre,
.response-body pre {
  margin: 0;
  padding: 10px;
  background-color: #F5F7FA;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.4;
}

.evidence-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.evidence-item h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 500;
}

.evidence-item p {
  margin: 0 0 10px 0;
  color: #606266;
}

.screenshot-evidence,
.code-evidence,
.text-evidence,
.network-evidence {
  padding: 10px;
  background-color: #F5F7FA;
  border-radius: 4px;
  overflow-x: auto;
}

.code-evidence code,
.text-evidence pre,
.network-evidence pre {
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.remediation-advice p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.remediation-advice h4 {
  margin: 15px 0 10px 0;
  font-size: 14px;
  font-weight: 500;
}

.remediation-advice ol,
.remediation-advice ul {
  margin: 0 0 15px 0;
  padding-left: 20px;
}

.remediation-advice li {
  margin-bottom: 5px;
  line-height: 1.6;
}

.remediation-advice a {
  color: #409EFF;
  text-decoration: none;
}

.remediation-advice a:hover {
  text-decoration: underline;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

.execution-logs h4 {
  margin: 15px 0 10px 0;
  font-size: 14px;
  font-weight: 500;
}

.logs-container {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  background-color: #F5F7FA;
  border-radius: 4px;
}

.log-item {
  display: flex;
  margin-bottom: 5px;
  font-size: 13px;
}

.log-time {
  color: #909399;
  margin-right: 10px;
  min-width: 150px;
}

.log-message {
  flex: 1;
  word-break: break-all;
}

.share-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.share-link-container {
  margin-top: 10px;
}

.share-link-container h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 500;
}

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.mt-20 {
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .vulnerability-validation-container {
    padding: 10px;
  }
  
  .search-filter-section .el-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-filter-section .el-col {
    width: 100% !important;
  }
  
  .tasks-overview .el-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .tasks-overview .el-col {
    width: 100% !important;
  }
  
  .pagination-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .batch-actions {
    flex-wrap: wrap;
  }
}

/* 深色模式适配 */
:deep(.dark-mode) .vulnerability-validation-container {
  background-color: #1F2937;
}

:deep(.dark-mode) .validation-card {
  background-color: #111827;
  border-color: #374151;
}

:deep(.dark-mode) .card-header h2 {
  color: #F9FAFB;
}

:deep(.dark-mode) .search-filter-section .el-input__wrapper,
:deep(.dark-mode) .search-filter-section .el-select__wrapper {
  background-color: #374151;
  border-color: #4B5563;
}

:deep(.dark-mode) .search-filter-section .el-input__inner,
:deep(.dark-mode) .search-filter-section .el-select__placeholder,
:deep(.dark-mode) .search-filter-section .el-select__input {
  color: #E5E7EB;
}

:deep(.dark-mode) .tasks-overview .el-card {
  background-color: #1F2937;
  border-color: #374151;
}

:deep(.dark-mode) .overview-header {
  color: #F9FAFB;
}

:deep(.dark-mode) .overview-desc {
  color: #9CA3AF;
}

:deep(.dark-mode) .trend-indicator {
  color: #E5E7EB;
}

:deep(.dark-mode) .tasks-table-section .el-table {
  background-color: #111827;
}

:deep(.dark-mode) .tasks-table-section .el-table__header-wrapper th,
:deep(.dark-mode) .tasks-table-section .el-table__body-wrapper td {
  background-color: #1F2937;
  color: #F9FAFB;
  border-color: #374151;
}

:deep(.dark-mode) .batch-actions {
  background-color: #374151;
  border-color: #4B5563;
}

:deep(.dark-mode) .batch-actions span {
  color: #F9FAFB;
}

:deep(.dark-mode) .task-details-container {
  color: #F9FAFB;
}

:deep(.dark-mode) .step-details,
:deep(.dark-mode) .request-headers pre,
:deep(.dark-mode) .request-body pre,
:deep(.dark-mode) .response-headers pre,
:deep(.dark-mode) .response-body pre,
:deep(.dark-mode) .screenshot-evidence,
:deep(.dark-mode) .code-evidence,
:deep(.dark-mode) .text-evidence,
:deep(.dark-mode) .network-evidence,
:deep(.dark-mode) .logs-container {
  background-color: #374151;
  color: #E5E7EB;
}

:deep(.dark-mode) .validation-results-section h3,
:deep(.dark-mode) .task-execution-section h3 {
  color: #F9FAFB;
}

:deep(.dark-mode) .evidence-item p,
:deep(.dark-mode) .remediation-advice p {
  color: #E5E7EB;
}

:deep(.dark-mode) .progress-info {
  color: #9CA3AF;
}

:deep(.dark-mode) .log-time {
  color: #9CA3AF;
}

:deep(.dark-mode) .log-message {
  color: #E5E7EB;
}

:deep(.dark-mode) .loading-mask {
  background-color: rgba(17, 24, 39, 0.8);
}
</style>